<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'fangsong';
            }
            body {
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgb(0, 0, 0);
            }
            .item {
                position: relative;
                margin: 50px;
                width: 300px;
                height: 80px;
                text-align: center;
                line-height: 80px;
                text-transform: uppercase;
                text-decoration: none;
                font-size: 35px;
                letter-spacing: 5px;
                color: aqua;
                overflow: hidden;
                -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(6, 133, 133, 0.3));/* 实现倒影效果 */
            }
            /* 鼠标经过按钮样式改变 */
            .item:hover {
                background-color: aqua;
                box-shadow: 0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua;
                color: black;
            }
            /* 设置环绕按钮的4根线上面那条的样式 */
            .item span:nth-of-type(1) {
                position: absolute;
                left: -100%;
                width: 100%;
                height: 3px;
                background-image: linear-gradient(to left, aqua, transparent);
                animation: shang 1s linear infinite;
            }
            @keyframes shang {
                0% {
                    left: -100%;
                }
                50%,
                100% {
                    left: 100%;
                }
            }
            .item span:nth-of-type(2) {
                position: absolute;
                top: -100%;
                right: 0;
                width: 3px;
                height: 100%;
                background-image: linear-gradient(to top, aqua, transparent);
                animation: you 1s linear infinite;
                animation-delay: 0.25s;
            }
            @keyframes you {
                0% {
                    top: -100%;
                }
                50%,
                100% {
                    top: 100%;
                }
            }
            .item span:nth-of-type(3) {
                position: absolute;
                right: -100%;
                bottom: 0;
                width: 100%;
                height: 3px;
                background-image: linear-gradient(to right, aqua, transparent);
                animation: xia 1s linear infinite;
                animation-delay: 0.5s;
            }
            @keyframes xia {
                0% {
                    right: -100%;
                }
                50%,
                100% {
                    right: 100%;
                }
            }
            .item span:nth-of-type(4) {
                position: absolute;
                bottom: -100%;
                left: 0;
                width: 3px;
                height: 100%;
                background-image: linear-gradient(to bottom, aqua, transparent);
                animation: zuo 1s linear infinite;
                animation-delay: 0.75s;/* 动画延迟执行。每条线对应延迟一段时间，形成时间差，形成环绕效果 */
            }
            @keyframes zuo {
                0% {
                    bottom: -100%;
                }
                50%,
                100% {
                    bottom: 100%;
                }
            }
            /* 给第一，第三个按钮设置其它颜色 */
            .item1 {
                filter: hue-rotate(100deg);/* 用色相旋转，这样不管背景还是阴影颜色都变了 */
            }
            .item3 {
                filter: hue-rotate(250deg);
            }
        </style>
    </head>
    <body>
        <a href="#" class="item item1">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <a href="#" class="item item2">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <a href="#" class="item item3">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
    </body>
</html>
